import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, Image, FlatList, TextInput, Alert,ScrollView
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { CommonDialog } from '../../../components/common/Dialog';
import MethodUtil from '../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;
export class occupiedDetail extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '订单占用明细',
			headerTintColor: '#000',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#000' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: {  // 头部整体样式 
				elevation: 0,
				borderBottomWidth: 0,
				backgroundColor: '#fff'
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
			}
	};

	constructor(props) {
	super(props);
	let {isForeign,orderId,corpId,orderType} = props.navigation.state.params||{}
	this.state = {
		status: 'data',
		res: {}, // 列表数据
		modalVisible:false,
		listData:[],
		isForeign
	}
	this.pageParams = { // TODO
		orderType,
		orderId,
		corpId,
		isForeign
    }
	}

	async componentWillMount() {
		await this.initPage();
  	}
  
	async initPage() {
		this.setState({
			status: 'loading',
		})
		let res = await HTTP.POST(API_GENERATE(API.CAPITAL_ORDER_DETAIL), this.pageParams);
		console.log(res)
		if (res) {
			this.setState({
				status:'data',
				res
			})
		} else {
			this.setState({
				status: 'error'
			})
		}
	}

	_toMoney (num) {
	let {isForeign} = this.state
	let currency = (isForeign!==1?'￥':'$')
		if(num){
		  let str = MethodUtil.toThousands(num || 0, 2)
		  let arr = str.split('')
		  if(num>0){
			arr.splice(0,0,currency);
		  }
		  else{
			arr.splice(1,0,currency);
		  }
		  str = arr.join('')
		  return str
		}
		else{
		  return currency + ' 0'
		}
	  }
	_toMoney2(num) {
		if(num){
			num = MethodUtil.toThousands(num || 0, 2)
			return num
		  }
		  else{
			return 0
		  }
	}
  	async showModal () {
		let res = await HTTP.POST(API_GENERATE(API.CAPITAL_ORDER_LIST), this.pageParams);
		this.setState({
			modalVisible:true,
			listData:res
		})
	}
  	_renderToastWrap = () => {
		let {listData} = this.state
      	return (
			<View style={styles.renderWrap}>
				{listData.map((item,index)=>{
					return(
						<View style={styles.listItem} key={index}>
						<View>
							<Text style={{marginBottom:4*scale,fontSize:12*scale,color:'#000'}}>{item.bizTypeName}</Text>
							<Text style={styles.listItemTime}>{item.recognitionTime}</Text>
						</View>
						<View>
							<Text style={[styles.listItemNum,item.recognitionAmount>0?{color:'#CA0202',}:{color:'#19977B'}]}>{item.recognitionAmount>0?'+':''}{this._toMoney2(item.recognitionAmount)}</Text>
						</View>
					</View>
					)
				})
			}
        </View>
      )
  	}	
	render() {
		let {res,modalVisible,isForeign} = this.state;
		let {orderId,companyName,statusName,createTime,amount} = res.itemOccupyInfo || {}
		let currency = (isForeign!==1?'￥ -':'$ -')
		return (
		<ScrollView style={styles.container}>
			<View style={styles.topBox}>
				<View style={styles.flexRow}>
					<Text style={styles.orderText}>
						订单编号 {orderId}
					</Text>
					<Text style={styles.statusText}>
						{statusName}
					</Text>
				</View>
				<TouchableOpacity style={[styles.flexRow,{paddingTop:12*scale}]}
					onPress={()=>{
						this.props.navigation.navigate('OrderDetailsPage', {orderId: orderId})
					}}
				>
					<Text style={styles.nameText}>
						供应商 {companyName}
					</Text>
					<Image source={require('../../../imgs/arrow.png')} style={styles.detailImg}/>
				</TouchableOpacity>
			</View>
			<View style={styles.middleBox}>
				<Text style={{fontSize:12*scale,color:'#fff'}}>
					下单时间 {createTime}
				</Text>
				<View style={[styles.flexRow,{marginTop:16*scale}]}>
					<TouchableOpacity onPress={()=>{this.showModal()}}>
						<Text style={styles.middleText}>
							订单已配款（元）
						</Text>
						<View style={{flexDirection:'row',alignItems:'center'}}>
							<Text style={styles.middleNum}>
								{this._toMoney(res.recognitionAmount)}
							</Text>
							<Image source={require('../../../imgs/arrow.png')} style={[styles.detailImg,{tintColor:'#fff',marginTop:8*scale}]}/>
						</View>
					</TouchableOpacity>
					<View>
						<Text style={styles.middleText}>
							订单余额（元）
						</Text>
						<Text style={styles.middleNum}>
							{this._toMoney(amount)}
						</Text>
					</View>
				</View>
			</View>
			<View style={styles.listBox}>
				<Text style={{color:'#34475F',marginLeft:21*scale,fontWeight:'600'}}>
					占用明细
				</Text>
				<View style={{flexDirection:'row',alignItems:'center',marginTop:17*scale}}>
					<Text style={[styles.textType,{marginLeft:30*scale}]}>
						类型
					</Text>
					<Text style={{width:'35%',color:'#000'}}>
						总金额（元）
					</Text>
					<Text style={styles.textType}>
						数量（吨）
					</Text>
				</View>
				{res.itemOccupyList&&res.itemOccupyList.map((item,index)=>{
						return(
							<View style={{marginTop:14*scale}} key={index}>
								<View style={[styles.flexRow,{paddingLeft:20*scale,paddingRight:14*scale,alignItems:'flex-start'}]}>
									<View style={{flexDirection:'row'}}>
										<Text style={{fontSize:12*scale,marginRight:10*scale,marginTop:2*scale}}>商品</Text>
										<Text style={{fontSize:14*scale,fontWeight:'600',width:120*scale,color:'#000'}}>{item.goodsName}</Text>
									</View>
									{item.estimatedAmount?
										<Text style={{fontSize:10*scale,color:'#CA0202',fontWeight:'600',marginTop:2*scale}}
										>截止当前订单预计总额:{this._toMoney(item.estimatedAmount)}</Text>:null
									}
								</View>
								<View style={styles.listOccupyBox}>
									<TouchableOpacity style={styles.listOccupy}
										onPress={()=>{
											this.props.navigation.navigate('OrderDetailsPage', {orderId: orderId})
										}}
									>
										<Text style={styles.textType}>
											订单合同
										</Text>
										<Text style={{width:'35%',fontWeight:'600',color:'#000'}}>
											{item.amount||item.amount==0?this._toMoney(item.amount):currency}
										</Text>
										<View style={styles.listOccupyItem}>
											<Text style={{marginRight:20*scale,fontWeight:'600',marginLeft:30*scale,color:'#000'}}>
												{item.quantity||item.quantity==0?item.quantity:'-'}
											</Text>
											<Image source={require('../../../imgs/arrow.png')} style={styles.detailImgOccupy}/>
										</View>
									</TouchableOpacity>
									<TouchableOpacity style={styles.listOccupy}
										onPress={()=>{
											this.props.navigation.navigate('OrderDetailsPage', {orderId: orderId,tabIndex:2})
										}}
									>
										<Text style={styles.textType}>
											卖家已发货
										</Text>
										<Text style={{width:'35%',color:'#CA0202',fontWeight:'600'}}>
											{item.deliverAmt?this._toMoney(item.deliverAmt):currency}
										</Text>
										<View style={styles.listOccupyItem}>
											<Text style={{marginRight:20*scale,color:'#CA0202',fontWeight:'600',marginLeft:30*scale}}>
												{item.deliverQuantity?item.deliverQuantity:'-'}
											</Text>
											<Image source={require('../../../imgs/arrow.png')} style={styles.detailImgOccupy}/>
										</View>
									</TouchableOpacity>
									<TouchableOpacity style={[styles.listOccupy,{borderBottomWidth:0}]}
									onPress={()=>{
										this.props.navigation.navigate('OrderDetailsPage', {orderId: orderId,tabIndex:3})
									}}
									>
										<Text style={styles.textType}>
											已发货结算
										</Text>
										<Text style={{width:'35%',fontWeight:'600',color:'#000'}}>
											{item.receiveSettleAmt?this._toMoney(item.receiveSettleAmt):currency}
										</Text>
										<View style={styles.listOccupyItem}>
											<Text style={{marginRight:20*scale,fontWeight:'600',marginLeft:30*scale,color:'#000'}}>
												{item.receiveSettleQuantity?item.receiveSettleQuantity:'-'}
											</Text>
											<Image source={require('../../../imgs/arrow.png')} style={styles.detailImgOccupy}/>
										</View>
									</TouchableOpacity>
								</View>
							</View>
						)
					})
				}
				<View style={{height:30*scale}}>

				</View>
				<CommonDialog
					modalVisible={modalVisible}
					title={'订单配款流水'}
					onClosePress={() => { this.setState({ modalVisible: false }) }}
					renderCustom={this._renderToastWrap} 
				/>
			</View>
		</ScrollView >
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.bgGray,
	},
	topBox:{
		paddingHorizontal:28*scale,
		paddingVertical:24*scale
	},
	flexRow:{
		flexDirection:'row',
		justifyContent:'space-between',
		alignItems:'center'
	},
	detailImg:{
		width:6*scale,
		height:9*scale,
		tintColor:'#000',
		marginLeft:10*scale
	},
	middleBox:{
		backgroundColor:'#0E7FFD',
		paddingHorizontal:30*scale,
		paddingVertical:15*scale
	},
	orderText:{
		fontSize:12*scale,
		color:'#34475F'
	},
	statusText:{
		fontSize:12*scale,
		color:'#CA0202'
	},
	nameText:{
		fontSize:12*scale,
		color:'#848A96'
	},
	middleText:{
		fontSize:14*scale,
		color:'#fff'
	},
	middleNum:{
		marginTop:8*scale,
		fontSize:16*scale,
		color:'#fff'
	},
	listBox:{
		marginTop:20*scale
	},
	textType:{
		flex:1,
		// textAlign:'left',
		marginLeft:20*scale,
		color:"#000"
	},
	listOccupyBox:{
		marginTop:8*scale,
		backgroundColor:'#fff',
		marginHorizontal:10*scale,
		elevation:1,
		shadowColor: '#F0F3FC',  //  阴影颜色
		shadowOffset: { width: 0, height: 0 },  // 阴影偏移
		shadowOpacity: 1,  // 阴影不透明度
	},
	listOccupy:{
		flexDirection:'row',
		alignItems:'center',
		paddingTop:20*scale,
		paddingBottom:15*scale,
		borderBottomColor: '#E7E7E7',
		borderBottomWidth: 1 * scale,
		paddingHorizontal:5*scale
	},
	listOccupyItem:{
		flex:1,
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-between',
		paddingRight:17*scale
	},
	detailImgOccupy:{
		width:6*scale,
		height:9*scale,
		tintColor:'#000',
	},
	renderWrap:{
		backgroundColor:'#F6F6F6',
		borderRadius:8*scale,
		minHeight:315*scale,
	},
	listItem:{
		flexDirection:'row',
		justifyContent:'space-between',
		alignItems:'center',
		height:69*scale,
		paddingHorizontal:10*scale
	  },
	  listItemTime:{
		fontSize:10*scale,
		color:'#000',
		opacity:0.5,
	  },
	  listItemNum:{
		fontSize:15*scale,
		fontWeight:'600'
	  }
})